import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Quotes } from 'src/app/domain/quote.model';
import { QuoteService } from 'src/app/services/quote.service';
// import { QuoteService } from 'src/app/services/quote.service';

@Component({
  selector: 'task-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  quote:Quotes = {
    "cn": "我们在人生中会做出许多选择，带着这些选择继续生活，才是生活中最难的一课。《妙笔生花》",
      "en": "We will make many choices in our life. To carry on with these choices is the most difficult lesson in our life. Beautiful flowers",
      "pic": "/assets/images/img.jpg"
  };
  constructor(private fb: FormBuilder,private quoteService$:QuoteService) {  // 使用FormBuilder可以简化写法
    // console.log(QuoteService);
    this.quoteService$.getQuote().subscribe((q:Quotes) => {
      console.log(q);
      this.quote = q;
    });
  }

  ngOnInit() {
    // this.form = new FormGroup({ //初始化form 复杂的写法
    //   email:new FormControl('wang@163.com',Validators.compose([Validators.required,Validators.email])),
    //   password: new FormControl('',Validators.compose([Validators.required]))
    // });
    this.form = this.fb.group({// 初始化form 简单写法
      email: ['wang@163.com', Validators.compose([Validators.required, Validators.email])],
      password: ['', Validators.required]
    })
  }
  onSubmit({ value, valid }, ev: Event) { 
    ev.preventDefault();
    console.log(JSON.stringify(value));
    console.log(valid);
    // this.form.controls['email'].setValidators(this.validate); // 表单提交时动态添加验证规则
  }
  validate(c: FormControl): { [key: string]: any} {
    if(!c.value){
      return null;
    }
    return {
      emailNotValid:'email必须以wang开头'
    }
  }

}
